<template>
  <el-card class="card">
    <el-row type="flex" justify="space-between">
      <!-- 左边 -->
      <!-- this.$slots所有的插槽都在这里！！ -->
      <div v-if="$slots.before" class="before-box">
        <i class="el-icon-info"></i>
        <slot name="before" />
      </div>
      <!-- 右边 -->
      <div class="after-box">
        <slot name="after" />
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.card {
  margin: 20px;
  .before-box {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
    border-radius: 3px;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    i {
      color: #409eff;
      margin-right: 5px;
    }
  }
  .after-box {
    // 用剩余的宽度，如果只有它，那它就是铺满（100%）
    // 如果还有别的，就是剩余的所有宽度
    display: flex;
    flex: 1;
    justify-content: flex-end;
  }
}
</style>
